<template>
  <layout tabbar="/pages/mine/mine" navbar="custom" :showBack="false" navbarBackgroundColor="transparent">
    <!-- 自定义导航栏内容 -->
    <template #navbar>
      <view :style="{paddingTop: vuex_status_bar_height + 'px' }" class="custom-nav" :class="{'nav-scrolled': isScrolled}">
        <view class="nav-content tn-flex tn-flex-col-center tn-flex-row-between">
          <view class="nav-left">
            <view class="icon-btn" @tap="showSettings">
              <text class="tn-icon-set"></text>
            </view>
          </view>
          <view class="nav-user-info tn-flex tn-flex-col-center tn-flex-row-left" v-if="isScrolled">
            <image class="nav-avatar" :src="mergedUserInfo.avatar" mode="aspectFill"></image>
            <view class="nav-username" :class="{'username-vip': mergedUserInfo.isVip}">
              <span class="username-text">{{ mergedUserInfo.username }}</span>
              <view class="badges-container">
                <view class="nav-verified" v-if="mergedUserInfo.isVerified">
                  <text class="tn-icon-check"></text>
                </view>
                <view class="nav-vip-badge" v-if="mergedUserInfo.isVip">VIP</view>
              </view>
            </view>
          </view>
          <view class="nav-right">
          </view>
        </view>
      </view>
    </template>
    
    <view class="mine-page">
      <!-- 滚动时显示的精简头部 -->
      <view class="header-compact" :class="{ 'show': false }">
        <image class="compact-avatar" :src="mergedUserInfo.avatar" mode="aspectFill"></image>
        <view class="compact-info">
          <view class="compact-username" :class="{'username-vip': mergedUserInfo.isVip}">
            <span class="username-text">{{ mergedUserInfo.username }}</span>
            <view class="badges-container">
              <view class="compact-verified" v-if="mergedUserInfo.isVerified">
                <text class="tn-icon-check"></text>
              </view>
              <view class="compact-vip-badge" v-if="mergedUserInfo.isVip">VIP</view>
            </view>
          </view>
          <view class="compact-id">ID: {{ mergedUserInfo.id }}</view>
        </view>
        <view class="icon-btn" @tap="showSettings">
          <text class="tn-icon-set"></text>
        </view>
      </view>
      
      <!-- 用户信息头部 -->
      <view class="profile-header">
        <image class="profile-cover" :src="mergedUserInfo.coverImage" mode="aspectFill"></image>
        <view class="profile-gradient"></view>
      </view>
      
      <!-- 用户资料 -->
      <view class="profile-info">
        <view class="profile-main">
          <view class="profile-avatar-container" :class="{'profile-completed': profileCompletionPercentage === 100}">
            <image class="profile-avatar" :src="mergedUserInfo.avatar" mode="aspectFill"></image>
            
            <!-- 编辑按钮 - 放在头像下方 -->
            <view class="profile-edit-btn" @tap="navigateTo('edit-profile')">
              <text class="tn-icon-edit"></text>
              <text v-if="profileCompletionPercentage < 100">{{profileCompletionPercentage}}%</text>
              <text class="edit-text" v-else>编辑</text>
            </view>
            
            <!-- 添加资料完成度环形进度 -->
            <view class="profile-completion-ring">
              <view class="completion-fill" :style="{
                transform: isProfileCompletionAnimated ? 
                  (profileCompletionPercentage <= 50 ? 
                    `rotate(${profileCompletionDegree}deg)` : 
                    'rotate(180deg)'
                  ) : 
                  'rotate(0deg)'
              }"></view>
              <view class="second-half" :style="{
                transform: `rotate(${profileCompletionPercentage > 50 ? 
                  (profileCompletionDegree - 180) : 0}deg)`,
                opacity: isProfileCompletionAnimated && profileCompletionPercentage > 50 ? 1 : 0
              }"></view>
              <view class="completion-center">
                <text>{{profileCompletionPercentage}}%</text>
              </view>
            </view>
          </view>
          <view class="profile-details">
            <view class="profile-username-container">
              <view class="profile-username" :class="{'username-vip': mergedUserInfo.isVip}">
                <span class="username-text">{{ mergedUserInfo.username }}</span>
                <!-- 将认证标识和VIP标识放在一个单独的容器中 -->
                <view class="badges-container">
                  <view class="verified-badge" v-if="mergedUserInfo.isVerified" @tap.stop="showVerifiedInfo">
                    <text class="tn-icon-check"></text>
                  </view>
                  <view class="username-vip-badge" v-if="mergedUserInfo.isVip">VIP</view>
                </view>
              </view>
            </view>
            <view class="profile-id">
              ID: {{ mergedUserInfo.id }}
              <view class="copy-id-btn" @tap="copyUserId">复制</view>
            </view>
            
            <!-- 添加简短个人签名 -->
            <view class="profile-bio" v-if="mergedUserInfo.bio">{{ mergedUserInfo.bio }}</view>
          </view>
        </view>
        
        <!-- 统计信息 -->
        <view class="profile-stats">
          <view class="stat-item" @tap="showPostsModal">
            <view class="stat-value">{{ mergedUserInfo.posts }}</view>
            <view class="stat-label">动态</view>
          </view>
          <view class="stat-item" @tap="navigateTo('my-following')">
            <view class="stat-value">{{ mergedUserInfo.following }}</view>
            <view class="stat-label">关注</view>
          </view>
          <view class="stat-item" @tap="navigateTo('my-followers')">
            <view class="stat-value">{{ mergedUserInfo.followers }}</view>
            <view class="stat-label">粉丝</view>
          </view>
          <view class="stat-item" @tap="navigateTo('my-likes')">
            <view class="stat-value">{{ mergedUserInfo.likes || 0 }}</view>
            <view class="stat-label">获赞</view>
          </view>
        </view>
        
        <!-- 会员卡片 - 新增 -->
        <view class="vip-card" @tap="showVipModal" :class="{'is-vip': mergedUserInfo.isVip}">
          <view class="vip-card-bg"></view>
          <view class="vip-card-content">
            <view class="vip-card-left">
              <view class="vip-card-title">
                <text class="tn-icon-vip-diamond"></text>
                <text>{{ mergedUserInfo.isVip ? 'VIP会员' : '开通VIP会员' }}</text>
              </view>
              <view class="vip-card-desc">{{ mergedUserInfo.isVip ? mergedUserInfo.vipExpireText : '享受专属特权和功能' }}</view>
              <view class="vip-card-tags">
                <view class="vip-tag">专属标识</view>
                <view class="vip-tag">高级功能</view>
                <view class="vip-tag">免费特权</view>
              </view>
            </view>
            <view class="vip-card-right">
              <view class="vip-card-btn">{{ mergedUserInfo.isVip ? '立即查看' : '立即开通' }}</view>
            </view>
          </view>
        </view>
        
        <!-- 功能列表第一部分 -->
        <view class="menu-section">
          <view class="menu-header">
            <text>我的资产</text>
            <view class="menu-header-more" @tap="navigateTo('wallet-detail')">
              查看明细 <text class="tn-icon-right"></text>
            </view>
          </view>
          <view class="menu-item" @tap="showWithdrawModal">
            <view class="menu-icon">
              <text class="tn-icon-bank"></text>
            </view>
            <view class="menu-text">我的钱包</view>
            <view class="menu-money">¥{{ mergedUserInfo.balance.toFixed(2) }}</view>
            <view class="menu-action">
              <view class="action-btn withdraw-btn">提现</view>
            </view>
          </view>
          <view class="menu-item" @tap="navigateTo('/pages/coin-detail/coin-detail')">
            <view class="menu-icon coins-icon">
              <text class="tn-icon-gift"></text>
            </view>
            <view class="menu-text">我的金币</view>
            <view class="menu-coins">{{ mergedUserInfo.coins }}</view>
            <view class="menu-action">
              <view class="action-btn recharge-btn" @tap.stop="showRechargeModal">充值</view>
            </view>
          </view>
        </view>
        
        <!-- 功能列表第二部分 -->
        <view class="menu-section" style="margin-top: 30rpx;">
          <view class="menu-header">
            <text>我的功能</text>
          </view>
          <view class="menu-grid">
            <view class="menu-grid-item" @tap="navigateTo('my-teams')">
              <view class="grid-icon">
                <text class="tn-icon-team"></text>
                <view class="grid-badge" v-if="notifications.teams">{{ notifications.teams }}</view>
              </view>
              <view class="grid-text">我的组队</view>
            </view>
            <view class="menu-grid-item" @tap="navigateTo('my-favorites')">
              <view class="grid-icon">
                <text class="tn-icon-star"></text>
              </view>
              <view class="grid-text">我的收藏</view>
            </view>
            <view class="menu-grid-item" @tap="showVisitorsModal">
              <view class="grid-icon">
                <text class="tn-icon-eye"></text>
                <view class="grid-badge" v-if="!isVisitorsUnlocked && visitors.length > 0">{{ visitors.length }}</view>
              </view>
              <view class="grid-text">访客记录</view>
            </view>
            <view class="menu-grid-item" @tap="navigateTo('history')">
              <view class="grid-icon">
                <text class="tn-icon-history"></text>
              </view>
              <view class="grid-text">浏览历史</view>
            </view>
            <view class="menu-grid-item" @tap="navigateTo('game-center')">
              <view class="grid-icon">
                <text class="tn-icon-gamepad"></text>
              </view>
              <view class="grid-text">游戏中心</view>
            </view>
            <view class="menu-grid-item" @tap="navigateTo('invite-friends')">
              <view class="grid-icon">
                <text class="tn-icon-share"></text>
              </view>
              <view class="grid-text">邀请好友</view>
            </view>
            <view class="menu-grid-item" @tap="navigateTo('customer-service')">
              <view class="grid-icon">
                <text class="tn-icon-service"></text>
              </view>
              <view class="grid-text">客服中心</view>
            </view>
            <view class="menu-grid-item" @tap="showActionSheet">
              <view class="grid-icon">
                <text class="tn-icon-more-circle"></text>
              </view>
              <view class="grid-text">更多功能</view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 提示框 -->
      <tn-toast ref="toast"></tn-toast>
      
      <!-- 底部弹出菜单 -->
      <tn-popup mode="bottom" v-model="isActionSheetVisible" maskCloseable :customStyle="{borderRadius: '24rpx 24rpx 0 0'}" backgroundColor="transparent">
        <view class="action-sheet">
          <view class="action-sheet-header">
            <view class="action-sheet-title">更多选项</view>
            <view class="close-btn" @tap="hideActionSheet">
              <text class="tn-icon-close"></text>
            </view>
          </view>
          <view class="action-sheet-content">
            <view class="action-item" @tap="navigateTo('settings')">设置</view>
            <view class="action-item" @tap="navigateTo('privacy')">隐私设置</view>
            <view class="action-item" @tap="navigateTo('feedback')">意见反馈</view>
            <view class="action-item" @tap="navigateTo('about')">关于我们</view>
            <!-- #ifndef MP-WEIXIN -->
            <view class="action-item danger" @tap="logout">退出登录</view>
            <!-- #endif -->
          </view>
        </view>
      </tn-popup>
      
      <!-- 会员开通弹窗 -->
      <vip-popup :show.sync="isVipModalVisible" :userInfo="mergedUserInfo" @purchase-success="onVipPurchaseSuccess"></vip-popup>
      
      <!-- 提现弹窗 -->
      <tn-popup mode="center" v-model="isWithdrawModalVisible" maskCloseable :customStyle="{borderRadius: '20rpx'}" backgroundColor="transparent">
        <view class="withdraw-modal">
          <view class="withdraw-header">
            <view class="withdraw-title">余额提现</view>
            <view class="withdraw-subtitle">安全快速到账</view>
            <view class="withdraw-close" @tap="hideWithdrawModal">
              <text class="tn-icon-close"></text>
            </view>
          </view>
          <view class="withdraw-content">
            <view class="balance-info">
              <view class="balance-label">当前可提现余额</view>
              <view class="balance-amount">¥ {{ mergedUserInfo.balance }}</view>
            </view>
            
            <view class="input-group">
              <view class="input-label">提现金额</view>
              <input type="number" class="amount-input" v-model="withdrawAmount" placeholder="请输入提现金额" />
            </view>
            
            <view class="quick-amounts">
              <view class="quick-amount" @tap="setWithdrawAmount(50)">¥50</view>
              <view class="quick-amount" @tap="setWithdrawAmount(100)">¥100</view>
              <view class="quick-amount" @tap="setWithdrawAmount(200)">¥200</view>
              <view class="quick-amount" @tap="setWithdrawAmount(mergedUserInfo.balance)">全部</view>
            </view>
            
            <view class="withdraw-method">
              <view class="input-label">提现方式</view>
              <view class="method-selector">
                <view class="method-option" :class="{ 'selected': withdrawMethod === 'alipay' }" @tap="selectWithdrawMethod('alipay')">
                  <text class="method-icon tn-icon-command"></text>
                  <text>支付宝</text>
                </view>
                <view class="method-option" :class="{ 'selected': withdrawMethod === 'wechat' }" @tap="selectWithdrawMethod('wechat')">
                  <text class="method-icon tn-icon-logo-wechat"></text>
                  <text>微信</text>
                </view>
                <view class="method-option" :class="{ 'selected': withdrawMethod === 'bank' }" @tap="selectWithdrawMethod('bank')">
                  <text class="method-icon tn-icon-credit-card"></text>
                  <text>银行卡</text>
                </view>
              </view>
            </view>
            
            <view class="withdraw-btn" @tap="submitWithdraw" :class="{'disabled': !canWithdraw}">
              {{ withdrawBtnText }}
            </view>
          </view>
        </view>
      </tn-popup>
      
      <!-- 访客解锁弹窗 -->
      <tn-popup mode="center" v-model="isVisitorsModalVisible" maskCloseable :customStyle="{borderRadius: '20rpx'}" backgroundColor="transparent">
        <view class="visitors-modal">
          <view class="visitors-header">
            <view class="visitors-title">访客记录</view>
            <view class="visitors-subtitle">查看谁偷偷关注了你</view>
            <view class="visitors-close" @tap="hideVisitorsModal">
              <text class="tn-icon-close"></text>
            </view>
          </view>
          <view class="visitors-content">
            <block v-if="!isVisitorsUnlocked">
              <view class="visitors-locked">
                <view class="lock-icon">
                  <text class="tn-icon-lock"></text>
                </view>
                <view class="lock-text">解锁后可查看访客信息</view>
                <view class="unlock-options">
                  <view class="unlock-option">
                    <view class="unlock-btn coin-unlock" @tap="unlockVisitorsWithCoins">
                      解锁(20币)
                    </view>
                    <view class="option-desc">单次解锁</view>
                  </view>
                  <view class="unlock-option">
                    <view class="unlock-btn vip-unlock" @tap="showVipModal">
                      VIP免费
                    </view>
                    <view class="option-desc">永久解锁</view>
                  </view>
                </view>
              </view>
            </block>
            <block v-else>
              <view class="visitors-list">
                <view class="visitor-item" v-for="(visitor, index) in visitors" :key="index" @tap="goToUserProfile(visitor.id)">
                  <image class="visitor-avatar" :src="visitor.avatar" mode="aspectFill"></image>
                  <view class="visitor-info">
                    <view class="visitor-name" :class="{'username-vip': visitor.isVip}">{{ visitor.username }}</view>
                    <view class="visitor-time">{{ visitor.time }}来访</view>
                  </view>
                  <view class="visitor-action">
                    <view class="follow-btn" :class="{'following': visitor.isFollowing}" @tap.stop="toggleFollow(index)">
                      {{ visitor.isFollowing ? '已关注' : '关注' }}
                    </view>
                  </view>
                </view>
              </view>
            </block>
          </view>
        </view>
      </tn-popup>
      
      <!-- 动态查看弹窗 -->
      <tn-popup mode="center" v-model="isPostsModalVisible" maskCloseable :customStyle="{borderRadius: '20rpx'}" backgroundColor="transparent">
        <view class="posts-modal">
          <view class="posts-header">
            <view class="posts-title">我的动态</view>
            <view class="posts-close" @tap="hidePostsModal">
              <text class="tn-icon-close"></text>
            </view>
          </view>
          <view class="posts-content">
            <scroll-view scroll-y class="posts-list">
              <view class="empty-posts" v-if="myPosts.length === 0">
                <text class="tn-icon-info"></text>
                <view>您还没有发布动态</view>
                <view class="create-post-btn" @tap="navigateTo('create-post')">发布动态</view>
              </view>
              <view class="post-item" v-for="(post, index) in myPosts" :key="index" @tap="navigateTo('post-detail', {id: post.id})">
                <view class="post-content">
                  <view class="post-text">{{ post.content }}</view>
                  <view class="post-info">
                    <view class="post-time">{{ post.time }}</view>
                    <view class="post-stats">
                      <text class="tn-icon-like"></text> {{ post.likes }}
                      <text class="tn-icon-message" style="margin-left: 20rpx;"></text> {{ post.comments }}
                    </view>
                  </view>
                </view>
                <image class="post-image" v-if="post.images && post.images.length > 0" :src="post.images[0]" mode="aspectFill"></image>
              </view>
            </scroll-view>
          </view>
        </view>
      </tn-popup>
    </view>
    
    <!-- 充值金币弹窗 -->
    <coin-recharge-popup :show.sync="isRechargeModalVisible" @recharge-success="onRechargeSuccess"></coin-recharge-popup>
    
  </layout>
</template>

<script>
import Layout from '@/components/layout/layout.vue';
import router from '@/utils/router';
import VipPopup from '@/components/vip/vip-popup.vue';
import CoinRechargePopup from '@/components/common/CoinRechargePopup.vue';
import { mapState } from 'vuex';

export default {
  components: {
    Layout,
    VipPopup,
    CoinRechargePopup
  },
  data() {
    return {
      // 用户信息，使用默认值（当store中没有数据时使用）
      defaultUserInfo: {
        id: '12345678',
        username: '神秘人',
        avatar: 'https://picsum.photos/seed/user1/200',
        coverImage: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/aa361225849eeb86428e1a3d647d6f7b94354e74de212403bb968e6ad85e79b3.jpeg',
        isVip: false,
        isVerified: true,
        balance: 0.00,
        coins: 0,
        // 统计数据默认值
        posts: 0,
        following: 0,
        followers: 0,
        likes: 0,
        bio: '暂无签名',
        vipExpireText: '剩余0天'
      },
      
      // 添加资料完成度相关数据
      profileFields: {
        username: false,       // 用户名，已完成
        avatar: false,         // 头像，已完成
        bio: true,            // 简介，已完成
        gender: true,         // 性别，已完成
        birthday: true,      // 生日，未完成
        location: true,       // 地区，已完成
        gamePreferences: true, // 游戏偏好，已完成
        contactInfo: true,   // 联系方式，未完成
        education: true,     // 教育经历，未完成
        personalTags: true,   // 个人标签，已完成
      },
      
      // 页面滚动相关
      isScrolled: false,
      scrollTop: 0,
      
      // 添加动画状态控制
      isProfileCompletionAnimated: false,
      
      // 弹窗显示状态
      isActionSheetVisible: false,
      isVipModalVisible: false,
      isWithdrawModalVisible: false,
      isVisitorsModalVisible: false,
      isPostsModalVisible: false,
      isRechargeModalVisible: false,
      
      // 提现相关
      withdrawAmount: '',
      withdrawMethod: 'alipay',
      withdrawBtnText: '确认提现',
      
      // 访客记录相关
      isVisitorsUnlocked: false,
      visitors: [
        {
          id: 101,
          username: '游戏小王子超长昵称测试',
          avatar: 'https://picsum.photos/seed/user2/200',
          time: '今天 14:32',
          isVip: true,
          isFollowing: false
        },
        {
          id: 102,
          username: '荣耀守卫',
          avatar: 'https://picsum.photos/seed/user3/200',
          time: '今天 11:45',
          isVip: false,
          isFollowing: true
        },
        {
          id: 103,
          username: '峡谷之巅',
          avatar: 'https://picsum.photos/seed/user4/200',
          time: '昨天 20:13',
          isVip: false,
          isFollowing: false
        },
        {
          id: 104,
          username: '最强王者',
          avatar: 'https://picsum.photos/seed/user5/200',
          time: '昨天 18:22',
          isVip: true,
          isFollowing: false
        },
        {
          id: 105,
          username: '电竞少女',
          avatar: 'https://picsum.photos/seed/user6/200',
          time: '昨天 15:10',
          isVip: false,
          isFollowing: true
        }
      ],
      
      // 动态数据
      myPosts: [
        {
          id: 1001,
          content: '今天连赢5把，段位终于上钻石了，开心！',
          time: '今天 10:25',
          likes: 24,
          comments: 8,
          images: ['https://picsum.photos/seed/post1/300/200']
        },
        {
          id: 1002,
          content: '有没有一起组队的，缺个辅助位置，钻石段位以上优先',
          time: '昨天 18:30',
          likes: 15,
          comments: 12,
          images: []
        },
        {
          id: 1003,
          content: '新赛季开始了，目标是本赛季打到王者，冲冲冲！',
          time: '3天前',
          likes: 56,
          comments: 18,
          images: ['https://picsum.photos/seed/post3/300/200']
        }
      ],
      
      // 通知数量
      notifications: {
        teams: 2,
        messages: 5
      }
    }
  },
  computed: {
    // 从store中获取用户信息和登录状态
    ...mapState('user', ['userInfo', 'isLogin']),
    
    // 合并store中的用户信息和默认用户信息
    // 如果store中有用户信息则使用store中的，否则使用默认值
    mergedUserInfo() {
      if (!this.userInfo) return this.defaultUserInfo;
      
      return {
        id: this.userInfo.id || this.defaultUserInfo.id,
        username: this.userInfo.nickname || this.userInfo.username || this.defaultUserInfo.username,
        avatar: this.userInfo.avatar || this.defaultUserInfo.avatar,
        coverImage: this.userInfo.coverImage || this.defaultUserInfo.coverImage,
        // 使用映射后的isVip字段，确保与store中处理一致
        isVip: this.userInfo.isVip || this.defaultUserInfo.isVip,
        isVerified: this.userInfo.isVerified || this.defaultUserInfo.isVerified,
        balance: this.userInfo.balance || this.defaultUserInfo.balance,
        coins: this.userInfo.point || this.defaultUserInfo.coins,
        // 用户统计数据 - 从后端返回的数据中获取
        posts: this.userInfo.postCount || this.defaultUserInfo.posts,
        following: this.userInfo.followingCount || this.defaultUserInfo.following,
        followers: this.userInfo.followerCount || this.defaultUserInfo.followers,
        likes: this.userInfo.likeCount || this.defaultUserInfo.likes,
        // 其他信息
        bio: this.userInfo.signature || this.userInfo.bio || this.defaultUserInfo.bio,
        vipExpireText: this.userInfo.vipExpireText || this.defaultUserInfo.vipExpireText
      };
    },
    
    // 是否可以提现
    canWithdraw() {
      const amount = parseFloat(this.withdrawAmount);
      return amount > 0 && amount <= this.mergedUserInfo.balance && this.withdrawMethod !== '';
    },
    
    // 计算资料完成度百分比
    profileCompletionPercentage() {
      const fields = Object.values(this.profileFields);
      const completedFields = fields.filter(field => field).length;
      return Math.round((completedFields / fields.length) * 100);
    },
    
    // 计算资料完成度环形进度角度
    profileCompletionDegree() {
      const percentage = this.profileCompletionPercentage;
      // 转换百分比为度数 (0-360度)
      return percentage * 3.6;
    }
  },
  onLoad() {
    // 尝试获取用户信息
    //this.getUserInfo();
    
    // 启动资料完成度动画
    setTimeout(() => {
      this.isProfileCompletionAnimated = true;
    }, 500);
  },
  onReady() {
    // 页面渲染完成后启动资料完成度环形进度条动画
    setTimeout(() => {
      this.isProfileCompletionAnimated = true;
    }, 300);
  },
  onPageScroll(e) {
    // 记录页面滚动位置
    this.scrollTop = e.scrollTop;
    // 当滚动超过100px时，导航栏变化和显示精简头部
    this.isScrolled = this.scrollTop > 100;
  },
  onShow() {
    // 如果已登录，则更新用户信息
    if (this.isLogin) {
      this.getUserInfo();
    }
  },
  methods: {
    // 导航到其他页面
    navigateTo(page, params = {}) {
      // 如果是完整路径，直接使用
      if (page.startsWith('/pages/')) {
        router.go(page, params);
      } else {
        // 否则构造完整路径
        router.go(`/pages/${page}/${page}`, params);
      }
    },
    
    // 显示设置菜单
    showSettings() {
      this.showActionSheet();
    },
    
    // 复制用户ID
    copyUserId() {
      uni.setClipboardData({
        data: this.mergedUserInfo.id,
        success: () => {
          this.$refs.toast.show({
            title: 'ID已复制',
            icon: 'correct'
          });
        }
      });
    },
    
    // 显示动态弹窗
    showPostsModal() {
      this.isPostsModalVisible = true;
    },
    
    // 隐藏动态弹窗
    hidePostsModal() {
      this.isPostsModalVisible = false;
    },
    
    // 显示底部操作表
    showActionSheet() {
      this.isActionSheetVisible = true;
    },
    
    // 隐藏底部操作表
    hideActionSheet() {
      this.isActionSheetVisible = false;
    },
    
    // 显示VIP会员弹窗
    showVipModal() {
      this.isVipModalVisible = true;
    },
    
    // VIP购买成功回调
    onVipPurchaseSuccess(purchaseInfo) {
      console.log('VIP购买成功', purchaseInfo);
    },
    
    // 显示提现弹窗
    showWithdrawModal() {
      this.isWithdrawModalVisible = true;
    },
    
    // 隐藏提现弹窗
    hideWithdrawModal() {
      this.isWithdrawModalVisible = false;
      this.withdrawAmount = '';
    },
    
    // 设置提现金额
    setWithdrawAmount(amount) {
      this.withdrawAmount = amount.toString();
    },
    
    // 选择提现方式
    selectWithdrawMethod(method) {
      this.withdrawMethod = method;
    },
    
    // 提交提现申请
    submitWithdraw() {
      if (!this.canWithdraw) return;
      
      // 这里应该调用提现接口
      setTimeout(() => {
        this.$refs.toast.show({
          title: '提现申请已提交',
          icon: 'success'
        });
        // 更新余额
        this.userInfo.balance -= parseFloat(this.withdrawAmount);
        this.hideWithdrawModal();
      }, 1000);
    },
    
    // 显示充值金币弹窗
    showRechargeModal() {
      this.isRechargeModalVisible = true;
    },
    
    // 隐藏充值金币弹窗
    hideRechargeModal() {
      this.isRechargeModalVisible = false;
    },
    
    // 充值成功回调
    onRechargeSuccess(data) {
      console.log('充值成功', data);
      // 更新本地用户数据
      this.userInfo.coins = data.totalCoins;
      
      // 显示成功提示
      this.$refs.toast.show({
        title: `充值成功，获得${data.coins}金币`,
        icon: 'success'
      });
    },
    
    // 显示访客记录弹窗
    showVisitorsModal() {
      this.isVisitorsModalVisible = true;
    },
    
    // 隐藏访客记录弹窗
    hideVisitorsModal() {
      this.isVisitorsModalVisible = false;
    },
    
    // 用金币解锁访客记录
    unlockVisitorsWithCoins() {
      if (this.userInfo.coins >= 20) {
        this.userInfo.coins -= 20;
        this.isVisitorsUnlocked = true;
        this.$refs.toast.show({
          title: '解锁成功',
          icon: 'success'
        });
      } else {
        this.$refs.toast.show({
          title: '金币不足',
          icon: 'error'
        });
      }
    },
    
    // 切换关注状态
    toggleFollow(index) {
      this.visitors[index].isFollowing = !this.visitors[index].isFollowing;
      if (this.visitors[index].isFollowing) {
        this.$refs.toast.show({
          title: '关注成功',
          icon: 'success'
        });
      }
    },
    
    // 前往用户资料页
    goToUserProfile(userId) {
      router.go('/pages/user-profile/user-profile', { id: userId });
    },
    
    // 退出登录
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 调用Vuex中的退出登录action
            this.$store.dispatch('user/logout').then(() => {
              // 显示退出成功提示
              uni.showToast({
                title: '已退出登录',
                icon: 'success',
                duration: 2000
              });
              
              // 关闭底部操作表
              this.hideActionSheet();
              
              // 关闭可能存在的WebSocket连接
              if (this.$webSocketManager && this.$webSocketManager.close) {
                this.$webSocketManager.close();
              }
              
              // 重置页面数据
              this.isVisitorsUnlocked = false;
              
              // 删除延迟跳转代码
            }).catch(err => {
              console.error('退出登录失败:', err);
              uni.showToast({
                title: '退出失败，请重试',
                icon: 'none'
              });
            });
          }
        }
      });
    },
    
    // 编辑头像
    editAvatar() {
      uni.showActionSheet({
        itemList: ['从相册选择', '拍照', '查看大图'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0: // 从相册选择
              this.chooseImage('avatar');
              break;
            case 1: // 拍照
              this.takePhoto('avatar');
              break;
            case 2: // 查看大图
              uni.previewImage({
                urls: [this.userInfo.avatar],
                current: this.userInfo.avatar
              });
              break;
          }
        }
      });
    },
    
    // 编辑封面
    editCover() {
      uni.showActionSheet({
        itemList: ['从相册选择', '拍照', '查看大图'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0: // 从相册选择
              this.chooseImage('cover');
              break;
            case 1: // 拍照
              this.takePhoto('cover');
              break;
            case 2: // 查看大图
              uni.previewImage({
                urls: [this.userInfo.coverImage],
                current: this.userInfo.coverImage
              });
              break;
          }
        }
      });
    },
    
    // 从相册选择图片
    chooseImage(type) {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          // 显示加载状态
          uni.showLoading({
            title: '上传中...'
          });
          
          // 模拟上传过程
          setTimeout(() => {
            uni.hideLoading();
            
            // 根据类型更新不同的图片
            if (type === 'avatar') {
              this.userInfo.avatar = res.tempFilePaths[0];
              this.$refs.toast.show({
                title: '头像已更新',
                icon: 'success'
              });
            } else if (type === 'cover') {
              this.userInfo.coverImage = res.tempFilePaths[0];
              this.$refs.toast.show({
                title: '封面已更新',
                icon: 'success'
              });
            }
          }, 1500);
        }
      });
    },
    
    // 拍照获取图片
    takePhoto(type) {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['camera'],
        success: (res) => {
          // 显示加载状态
          uni.showLoading({
            title: '上传中...'
          });
          
          // 模拟上传过程
          setTimeout(() => {
            uni.hideLoading();
            
            // 根据类型更新不同的图片
            if (type === 'avatar') {
              this.userInfo.avatar = res.tempFilePaths[0];
              this.$refs.toast.show({
                title: '头像已更新',
                icon: 'success'
              });
            } else if (type === 'cover') {
              this.userInfo.coverImage = res.tempFilePaths[0];
              this.$refs.toast.show({
                title: '封面已更新',
                icon: 'success'
              });
            }
          }, 1500);
        }
      });
    },
    
    // 显示认证信息
    showVerifiedInfo() {
      uni.showModal({
        title: '官方认证',
        content: '该用户已通过平台实名认证，是资深电竞玩家，信息真实可靠。',
        showCancel: false,
        confirmText: '我知道了',
        confirmColor: '#B3F73C'
      });
    },
    
    // 获取用户信息
    getUserInfo() {
      this.$store.dispatch('user/getUserInfo')
        .catch(err => {
          console.error('获取用户信息失败:', err);
        });
    },
  }
}
</script>

<style lang="scss" scoped>
.mine-page {
  min-height: 100vh;
  background-color: #020303;
  color: #e0e0e0;
  position: relative;
  width: 100%;
  overflow-x: hidden; 
  padding-bottom: 20rpx; /* 添加底部间距 */
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(rgba(179, 247, 60, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 0;
  }
  
  .header-compact {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: rgba(2, 3, 3, 0.95);
    backdrop-filter: blur(10px);
    padding: 30rpx;
    display: flex;
    align-items: center;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.2);
    
    &.show {
      transform: translateY(0);
    }
    
    .compact-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      border: 2rpx solid #B3F73C;
    }
    
    .compact-info {
      flex: 1;
      margin-left: 20rpx;
      max-width: calc(100% - 220rpx); // 添加最大宽度限制，减去头像和设置按钮宽度
      
      .compact-username {
        font-size: 32rpx;
        font-weight: 600;
        max-width: 60%;
        display: flex;
        align-items: center;
        
        .username-text {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          max-width: 200rpx;
        }
        
        .badges-container {
          display: flex;
          align-items: center;
          margin-left: 8rpx;
        }
        
        .compact-verified {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, #B3F73C, #8eac21);
          color: #020303;
          border-radius: 50%;
          width: 28rpx;
          height: 28rpx;
          font-size: 16rpx;
        }
        
        .compact-vip-badge {
          margin-left: 8rpx;
          background: linear-gradient(135deg, #8eac21, #B3F73C);
          color: #020303;
          padding: 0 8rpx;
          border-radius: 10rpx;
          font-size: 16rpx;
          font-weight: bold;
          border: 1rpx solid #020303;
        }
        
        &.username-vip {
          background: linear-gradient(45deg, #8eac21, #B3F73C);
          background-size: 200% 200%;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          text-shadow: 0 0 5px rgba(179, 247, 60, 0.3);
          animation: gradient-animation 3s ease infinite;
          
          .badges-container,
          .compact-verified,
          .compact-vip-badge {
            -webkit-text-fill-color: initial;
            text-shadow: none;
          }
        }
      }
      
      .compact-id {
        font-size: 24rpx;
        color: #999;
        margin-top: 4rpx;
        max-width: 200rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    
    .icon-btn {
      padding: 10rpx;
      color: #e0e0e0;
      
      .tn-icon-set {
        font-size: 44rpx;
      }
    }
  }
  
  .profile-header {
    position: relative;
    height: 320rpx;
    overflow: hidden;
    
    .profile-cover {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.9) contrast(1.1);
    }
    
    .profile-gradient {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 180rpx;
      background: linear-gradient(to top, rgba(2, 3, 3, 1), rgba(2, 3, 3, 0));
    }
  }
  
  .profile-info {
    padding: 0 30rpx;
    margin-top: -80rpx;
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box; // 确保内边距计算在宽度内
    
    .profile-main {
      display: flex;
      align-items: flex-end;
      margin-bottom: 40rpx;
      
      .profile-avatar-container {
        position: relative;
        z-index: 5;
        margin-right: 10rpx;
        width: 180rpx;
        height: 180rpx;
        
        // 当进度为100%时的特殊样式
        &.profile-completed {
          .profile-completion-ring {
            .completion-fill, .second-half {
              background: linear-gradient(90deg, rgba(179, 247, 60, 0.45), rgba(142, 172, 33, 0.45));
              animation: subtle-pulse 3s infinite;
            }
            
            &::after {
              border: 1rpx solid rgba(179, 247, 60, 0.3);
            }
          }
        }
        
        .profile-avatar {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          border: 3rpx solid rgba(179, 247, 60, 0.3);
          box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.3), 0 0 10rpx rgba(179, 247, 60, 0.2);
          position: relative;
          z-index: 3;
          display: block;
        }
        
        .vip-badge {
          position: absolute;
          bottom: 5rpx;
          right: 5rpx;
          background: linear-gradient(135deg, #8eac21, #B3F73C);
          color: #020303;
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2rpx solid #020303;
          font-size: 20rpx;
          font-weight: bold;
          animation: pulse 2s infinite;
          box-shadow: 0 0 12rpx rgba(179, 247, 60, 0.6);
          z-index: 4;
        }
        
        /* 编辑按钮 - 放在头像正下方 */
        .profile-edit-btn {
          position: absolute;
          bottom: -20rpx;
          left: 50%;
          transform: translateX(-50%);
          background: rgba(2, 3, 3, 0.85);
          border-radius: 30rpx;
          height: 44rpx;
          padding: 0 18rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #B3F73C;
          border: 1rpx solid rgba(179, 247, 60, 0.3);
          z-index: 5;
          transition: all 0.2s;
          white-space: nowrap;
          min-width: 60rpx;
          box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
          
          &:active {
            transform: translateX(-50%) scale(0.95);
            background-color: rgba(179, 247, 60, 0.1);
          }
          
          .tn-icon-edit {
            font-size: 24rpx;
            margin-right: 6rpx;
          }
          
          .edit-text {
            font-size: 24rpx;
            margin-left: 4rpx;
            display: inline-block;
          }
        }
        
        /* 添加资料完成度环形进度 */
        .profile-completion-ring {
          position: absolute;
          top: -6rpx;
          left: -6rpx;
          width: 192rpx;
          height: 192rpx;
          border-radius: 50%;
          overflow: hidden;
          z-index: 1;
          
          &::before {
            content: '';
            position: absolute;
            top: 10rpx;
            left: 10rpx;
            right: 10rpx;
            bottom: 10rpx;
            border-radius: 50%;
            border: 1rpx dashed rgba(179, 247, 60, 0.15);
            z-index: 0;
          }
          
          .completion-fill {
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, rgba(142, 172, 33, 0.4), rgba(179, 247, 60, 0.4));
            transform-origin: right center;
            z-index: 0;
            transition: transform 0.8s ease-out;
            box-shadow: 0 0 8rpx rgba(179, 247, 60, 0.2) inset;
          }
          
          .second-half {
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, rgba(179, 247, 60, 0.4), rgba(142, 172, 33, 0.4));
            transform-origin: left center;
            z-index: 0;
            opacity: 0;
            transition: opacity 0.3s ease-out, transform 0.8s ease-out;
            box-shadow: 0 0 8rpx rgba(179, 247, 60, 0.2) inset;
          }
          
          .completion-center {
            position: absolute;
            top: 10rpx;
            left: 10rpx;
            width: calc(100% - 20rpx);
            height: calc(100% - 20rpx);
            border-radius: 50%;
            background-color: #020303;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            overflow: hidden;
            
            text {
              font-size: 20rpx;
              font-weight: 600;
              color: #B3F73C;
              opacity: 0.9;
              letter-spacing: 0.5rpx;
            }
          }
          
          // 更微妙的边框效果
          &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 50%;
            border: 1rpx solid rgba(179, 247, 60, 0.15);
            z-index: 2;
            pointer-events: none;
          }
        }
      }
      
      .profile-details {
        flex: 1;
        margin-left: 30rpx;
        position: relative;
        z-index: 4;
        width: calc(100% - 220rpx); // 添加固定宽度计算，减去头像和间距的宽度
        
        .profile-username-container {
          display: flex;
          align-items: center;
          justify-content: flex-start; // 从space-between改为flex-start
          margin-bottom: 10rpx;
          width: 100%;
          position: relative;
          flex-wrap: nowrap;
          
          .profile-username {
            font-size: 40rpx;
            font-weight: bold;
            display: flex;
			flex: 1;
            align-items: center;
            max-width: 100%;
            position: relative;
            
            // 用户名文本
            .username-text {
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              max-width: calc(100% - 110rpx); // 为VIP标识预留空间
            }
            
            /* 徽章容器 */
            .badges-container {
              display: flex;
              align-items: center;
              margin-left: 10rpx;
            }
            
            /* VIP标识样式 */
            .username-vip-badge {
              margin-left: 10rpx;
              background: linear-gradient(135deg, #8eac21, #B3F73C);
              color: #020303;
              padding: 2rpx 12rpx;
              border-radius: 14rpx;
              font-size: 20rpx;
              font-weight: bold;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 1rpx solid #020303;
              box-shadow: 0 0 10rpx rgba(179, 247, 60, 0.5);
            }
            
            .verified-badge {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              background: linear-gradient(135deg, #B3F73C, #8eac21);
              color: #020303;
              border-radius: 50%;
              width: 36rpx;
              height: 36rpx;
              border: 1rpx solid #020303;
              box-shadow: 0 0 6rpx rgba(179, 247, 60, 0.4);
              
              .tn-icon-check {
                font-size: 20rpx;
                font-weight: bold;
              }
            }
            
            &.username-vip {
              background: linear-gradient(45deg, #8eac21, #B3F73C);
              background-size: 200% 200%;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              text-shadow: 0 0 5px rgba(179, 247, 60, 0.3);
              animation: gradient-animation 3s ease infinite;
              
              /* 确保在会员状态下标识显示正常 */
              .verified-badge,
              .username-vip-badge,
              .badges-container {
                -webkit-text-fill-color: initial;
                text-shadow: none;
              }
            }
          }
          
          // 移除原编辑资料按钮样式
        }
        
        .profile-id {
          display: flex;
          align-items: center;
          font-size: 26rpx;
          color: #999;
          margin-top: 10rpx;
          
          .copy-id-btn {
            margin-left: 10rpx;
            font-size: 20rpx;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 4rpx 12rpx;
            border-radius: 10rpx;
          }
        }
        
        .profile-bio {
          font-size: 24rpx;
          color: #aaa;
          margin-top: 16rpx;
          line-height: 1.4;
          max-height: 64rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        
        /* 添加资料完成度文字说明样式 */
        .profile-completion-text {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 20rpx;
          font-size: 24rpx;
          color: #999;
          
          &.completed {
            color: #B3F73C;
            font-weight: bold;
            
            .completion-improve {
              display: none;
            }
          }
          
          .completion-improve {
            color: #B3F73C;
            padding: 4rpx 12rpx;
            background-color: rgba(179, 247, 60, 0.1);
            border-radius: 20rpx;
            
            &:active {
              background-color: rgba(179, 247, 60, 0.2);
            }
          }
        }
      }
    }
    
    .profile-stats {
      display: flex;
      justify-content: space-between;
      padding: 30rpx 0;
      gap: 20rpx;
      
      .stat-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: linear-gradient(145deg, #050505, #0a0a0a);
        border-radius: 24rpx;
        padding: 24rpx 10rpx;
        transition: all 0.3s ease;
        box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(179, 247, 60, 0.05);
        position: relative;
        overflow: hidden;
        
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 1px;
          background: linear-gradient(90deg, 
            rgba(179, 247, 60, 0),
            rgba(179, 247, 60, 0.2),
            rgba(179, 247, 60, 0)
          );
        }
        
        &:active {
          transform: scale(0.95);
          box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
          border-color: rgba(179, 247, 60, 0.2);
          background: linear-gradient(145deg, #070707, #0d0d0d);
        }
        
        .stat-value {
          font-size: 36rpx;
          font-weight: bold;
          color: #B3F73C;
          margin-bottom: 8rpx;
          text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
        }
        
        .stat-label {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
    
    .menu-section {
      margin-top: 30rpx;
      background: linear-gradient(145deg, #050505, #0a0a0a);
      border-radius: 20rpx;
      overflow: hidden;
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
      position: relative;
      border: 1px solid rgba(30, 30, 30, 0.6);
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2rpx;
        background: linear-gradient(90deg, 
          rgba(179, 247, 60, 0),
          rgba(179, 247, 60, 0.5),
          rgba(179, 247, 60, 0)
        );
      }
      
      .menu-header {
        padding: 20rpx 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1rpx solid rgba(255, 255, 255, 0.08);
        background: linear-gradient(to right, rgba(5, 5, 5, 0.8), rgba(10, 10, 10, 0.8));
        
        text {
          font-size: 28rpx;
          color: #B3F73C;
          font-weight: 600;
        }
        
        .menu-header-more {
          font-size: 24rpx;
          color: #B3F73C;
          display: flex;
          align-items: center;
          
          .tn-icon-right {
            font-size: 20rpx;
            margin-left: 4rpx;
          }
        }
      }
      
      .menu-item {
        display: flex;
        align-items: center;
        padding: 30rpx;
        position: relative;
        background: linear-gradient(to right, rgba(5, 5, 5, 0.5), rgba(10, 10, 10, 0.5));
        transition: all 0.3s;
        
        &:active {
          background: linear-gradient(to right, rgba(10, 10, 10, 0.6), rgba(15, 15, 15, 0.6));
        }
        
        &:not(:last-child) {
          border-bottom: 1rpx solid rgba(255, 255, 255, 0.08);
        }
        
        .menu-icon {
          width: 60rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background-color: rgba(179, 247, 60, 0.08);
          margin-right: 20rpx;
          color: #B3F73C;
          box-shadow: 0 0 10rpx rgba(179, 247, 60, 0.1);
          transition: all 0.3s;
          
          &.coins-icon {
            color: #B3F73C;
          }
          
          &.vip-icon {
            color: #B3F73C;
            background: linear-gradient(135deg, rgba(142, 172, 33, 0.2), rgba(179, 247, 60, 0.2));
            box-shadow: 0 0 10rpx rgba(179, 247, 60, 0.3);
          }
          
          text {
            font-size: 32rpx;
          }
        }
        
        .menu-text {
          flex: 1;
          font-size: 28rpx;
          color: #e0e0e0;
          transition: all 0.3s;
        }
        
        .menu-money {
          font-size: 28rpx;
          font-weight: 600;
          color: #2ecc71;
          margin-right: 20rpx;
        }
        
        .menu-coins {
          font-size: 28rpx;
          font-weight: 600;
          color: #f1c40f;
          margin-right: 20rpx;
        }
        
        .menu-tag {
          padding: 4rpx 12rpx;
          background-color: rgba(179, 247, 60, 0.2);
          border-radius: 20rpx;
          font-size: 20rpx;
          color: #B3F73C;
          margin-right: 20rpx;
        }
        
        .menu-arrow {
          color: #999;
          font-size: 24rpx;
        }
        
        .menu-action {
          .action-btn {
            padding: 8rpx 24rpx;
            border-radius: 30rpx;
            font-size: 24rpx;
            font-weight: 600;
            text-align: center;
            transition: all 0.3s;
            box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
          }
          
          .withdraw-btn {
            background: linear-gradient(90deg, #8eac21, #B3F73C);
            color: #020303;
            
            &:active {
              transform: scale(0.95);
              background: linear-gradient(90deg, #8eac21, #8eac21);
            }
          }
          
          .recharge-btn {
            background: linear-gradient(90deg, #8eac21, #B3F73C);
            color: #020303;
            
            &:active {
              transform: scale(0.95);
              background: linear-gradient(90deg, #8eac21, #8eac21);
            }
          }
        }
      }
      
      .menu-grid {
        display: flex;
        flex-wrap: wrap;
        padding: 20rpx 10rpx;
        gap: 15rpx 0;
        position: relative;
        
        &::before {
          content: '';
          position: absolute;
          top: 10rpx;
          left: 20rpx;
          right: 20rpx;
          height: 1rpx;
          background: linear-gradient(90deg, 
            rgba(179, 247, 60, 0),
            rgba(179, 247, 60, 0.2),
            rgba(179, 247, 60, 0)
          );
          opacity: 0.6;
        }
        
        .menu-grid-item {
          width: 25%;
          padding: 15rpx 10rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;
          transition: all 0.3s;
          
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 20%;
            right: 20%;
            height: 0;
            background: linear-gradient(90deg, 
              rgba(179, 247, 60, 0),
              rgba(179, 247, 60, 0.5),
              rgba(179, 247, 60, 0)
            );
            opacity: 0;
            transition: all 0.3s;
          }
          
          .grid-icon {
            width: 90rpx;
            height: 90rpx;
            border-radius: 22rpx;
            background: linear-gradient(145deg, #0a0a0a, #1e1e1e);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin-bottom: 12rpx;
            color: #B3F73C;
            transition: all 0.3s;
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
            border: 1rpx solid rgba(179, 247, 60, 0.1);
            overflow: hidden;
            
            &::before {
              content: '';
              position: absolute;
              top: -50%;
              left: -50%;
              width: 200%;
              height: 200%;
              background: radial-gradient(circle, rgba(179, 247, 60, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
              opacity: 0;
              transform: translate(-100%, -100%);
              transition: all 0.5s ease-out;
            }
            
            text {
              font-size: 42rpx;
              filter: drop-shadow(0 2rpx 5rpx rgba(0, 0, 0, 0.3));
              z-index: 2;
              position: relative;
            }
            
            .grid-badge {
              position: absolute;
              top: -6rpx;
              right: -6rpx;
              min-width: 32rpx;
              height: 32rpx;
              background: linear-gradient(to right, #e74c3c, #e55039);
              color: white;
              border-radius: 16rpx;
              font-size: 20rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 0 6rpx;
              box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.4);
              border: 1rpx solid rgba(0, 0, 0, 0.2);
              z-index: 3;
              transform: scale(1);
              animation: badge-pulse 2s infinite;
            }
          }
          
          .grid-text {
            font-size: 24rpx;
            color: #e0e0e0;
            transition: all 0.3s;
            margin-top: 5rpx;
            font-weight: 500;
            letter-spacing: 0.5rpx;
          }
          
          &:active {
            transform: translateY(2rpx);
            
            .grid-icon {
              transform: scale(0.95);
              box-shadow: 0 0 15rpx rgba(179, 247, 60, 0.15);
              border-color: rgba(179, 247, 60, 0.3);
              background: linear-gradient(145deg, #0f0f0f, #232323);
              
              &::before {
                opacity: 1;
                transform: translate(0, 0);
              }
            }
            
            .grid-text {
              color: #B3F73C;
              transform: scale(1.05);
              font-weight: 600;
            }
            
            &::after {
              height: 2rpx;
              opacity: 1;
            }
          }
          
          /* 为每个图标定义微妙的独特颜色 */
          &:nth-child(1) .grid-icon { color: #B3F73C; }  /* 我的组队 */
          &:nth-child(2) .grid-icon { color: #FFC107; }  /* 我的收藏 */
          &:nth-child(3) .grid-icon { color: #00BCD4; }  /* 访客记录 */
          &:nth-child(4) .grid-icon { color: #9C27B0; }  /* 浏览历史 */
          &:nth-child(5) .grid-icon { color: #FF5722; }  /* 游戏中心 */
          &:nth-child(6) .grid-icon { color: #2196F3; }  /* 邀请好友 */
          &:nth-child(7) .grid-icon { color: #4CAF50; }  /* 客服中心 */
          &:nth-child(8) .grid-icon { color: #9E9E9E; }  /* 更多功能 */
        }
      }
      
      /* 添加徽章脉冲动画 */
      @keyframes badge-pulse {
        0% {
          transform: scale(1);
          box-shadow: 0 2rpx 6rpx rgba(231, 76, 60, 0.4);
        }
        50% {
          transform: scale(1.1);
          box-shadow: 0 2rpx 10rpx rgba(231, 76, 60, 0.7);
        }
        100% {
          transform: scale(1);
          box-shadow: 0 2rpx 6rpx rgba(231, 76, 60, 0.4);
        }
      }
    }
  }
  
  .action-sheet {
    background: linear-gradient(145deg, #050505, #0a0a0a);
    border-radius: 24rpx 24rpx 0 0;
    overflow: hidden;
    box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.3);
    position: relative;
    border: 1px solid rgba(179, 247, 60, 0.1);
    border-bottom: none;
    
    // 添加上边框光效
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2rpx;
      background: linear-gradient(90deg, 
        rgba(179, 247, 60, 0),
        rgba(179, 247, 60, 0.5),
        rgba(179, 247, 60, 0)
      );
      z-index: 2;
    }
    
    .action-sheet-header {
      padding: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid rgba(255, 255, 255, 0.08);
      
      .action-sheet-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #e0e0e0;
      }
      
      .close-btn {
        width: 50rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        
        .tn-icon-close {
          font-size: 32rpx;
        }
      }
    }
    
    .action-sheet-content {
      .action-item {
        padding: 30rpx;
        font-size: 30rpx;
        color: #e0e0e0;
        text-align: center;
        position: relative;
        transition: all 0.3s;
        
        &:not(:last-child) {
          border-bottom: 1rpx solid rgba(255, 255, 255, 0.08);
        }
        
        &:active {
          background-color: rgba(255, 255, 255, 0.05);
        }
        
        &.danger {
          color: #e74c3c;
        }
      }
    }
  }
  
  .withdraw-modal {
    width: 600rpx;
    background: linear-gradient(145deg, #050505, #0a0a0a);
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.5);
    position: relative;
    border: 1px solid rgba(179, 247, 60, 0.1);
    
    // 添加边框样式，确保圆角边缘没有白边
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 20rpx;
      border: 1rpx solid rgba(179, 247, 60, 0.2); 
      pointer-events: none;
      z-index: 1;
    }
    
    .withdraw-header {
      padding: 30rpx;
      position: relative;
      background: linear-gradient(135deg, #8eac21, #B3F73C);
      
      .withdraw-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #020303;
      }
      
      .withdraw-subtitle {
        font-size: 26rpx;
        color: rgba(2, 3, 3, 0.8);
        margin-top: 10rpx;
      }
      
      .withdraw-close {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        width: 50rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.8);
        
        .tn-icon-close {
          font-size: 30rpx;
        }
      }
    }
    
    .withdraw-content {
      padding: 30rpx;
      
      .balance-info {
        text-align: center;
        margin-bottom: 30rpx;
        
        .balance-label {
          font-size: 24rpx;
          color: #999;
        }
        
        .balance-amount {
          font-size: 48rpx;
          font-weight: bold;
          color: #B3F73C;
          margin-top: 10rpx;
        }
      }
      
      .input-group {
        margin-bottom: 20rpx;
        
        .input-label {
          font-size: 26rpx;
          color: #999;
          margin-bottom: 16rpx;
        }
        
        .amount-input {
          height: 80rpx;
          background-color: rgba(255, 255, 255, 0.05);
          border-radius: 10rpx;
          padding: 0 20rpx;
          color: #e0e0e0;
          font-size: 28rpx;
        }
      }
      
      .quick-amounts {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30rpx;
        
        .quick-amount {
          flex: 1;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          background-color: rgba(255, 255, 255, 0.05);
          border-radius: 10rpx;
          margin: 0 10rpx;
          font-size: 24rpx;
          color: #e0e0e0;
        }
      }
      
      .withdraw-method {
        margin-bottom: 30rpx;
        
        .method-selector {
          display: flex;
          justify-content: space-between;
          
          .method-option {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20rpx;
            background-color: rgba(255, 255, 255, 0.05);
            border-radius: 10rpx;
            margin: 0 10rpx;
            transition: all 0.3s;
            
            &.selected {
              background-color: rgba(179, 247, 60, 0.2);
              border: 2rpx solid #B3F73C;
            }
            
            .method-icon {
              font-size: 40rpx;
              margin-bottom: 10rpx;
            }
            
            text {
              font-size: 24rpx;
              color: #e0e0e0;
            }
          }
        }
      }
      
      .withdraw-btn {
        height: 80rpx;
        background: linear-gradient(135deg, #8eac21, #B3F73C);
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #020303;
        font-size: 30rpx;
        font-weight: 600;
        
        &.disabled {
          opacity: 0.5;
        }
      }
    }
  }
  
  .visitors-modal {
    width: 600rpx;
    background: linear-gradient(145deg, #050505, #0a0a0a);
    border-radius: 20rpx;
    overflow: hidden;
    max-height: 800rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.5);
    position: relative;
    
    // 添加边框样式，确保圆角边缘没有白边
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 20rpx;
      border: 1rpx solid rgba(179, 247, 60, 0.2); 
      pointer-events: none;
      z-index: 1;
    }
    
    .visitors-header {
      padding: 30rpx;
      position: relative;
      background: linear-gradient(135deg, #8eac21, #B3F73C);
      
      .visitors-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #020303;
        text-shadow: 0 2rpx 4rpx rgba(255, 255, 255, 0.2);
      }
      
      .visitors-subtitle {
        font-size: 26rpx;
        color: rgba(2, 3, 3, 0.8);
        margin-top: 10rpx;
      }
      
      .visitors-close {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        width: 50rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.8);
        
        .tn-icon-close {
          font-size: 30rpx;
        }
      }
    }
    
    .visitors-content {
      padding: 30rpx;
      max-height: 600rpx;
      overflow-y: auto;
      
      .visitors-locked {
        text-align: center;
        padding: 40rpx 0;
        
        .lock-icon {
          margin-bottom: 20rpx;
          width: 100rpx;
          height: 100rpx;
          background: rgba(0, 0, 0, 0.2);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 20rpx;
          
          .tn-icon-lock {
            font-size: 60rpx;
            color: #999;
          }
        }
        
        .lock-text {
          font-size: 28rpx;
          color: #e0e0e0;
          margin-bottom: 30rpx;
        }
        
        .unlock-options {
          display: flex;
          justify-content: center;
          
          .unlock-option {
            margin: 0 20rpx;
            
            .unlock-btn {
              height: 70rpx;
              line-height: 70rpx;
              border-radius: 35rpx;
              padding: 0 30rpx;
              font-size: 26rpx;
              font-weight: 600;
              text-align: center;
              box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.3);
              transition: all 0.3s;
              
              &:active {
                transform: translateY(2rpx);
                box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
              }
              
              &.coin-unlock {
                background: linear-gradient(135deg, #f1c40f, #f39c12);
                color: white;
              }
              
              &.vip-unlock {
                background: linear-gradient(135deg, #B3F73C, #8eac21);
                color: white;
              }
            }
            
            .option-desc {
              font-size: 22rpx;
              color: #999;
              text-align: center;
              margin-top: 10rpx;
            }
          }
        }
      }
      
      .visitors-list {
        .visitor-item {
          display: flex;
          align-items: center;
          padding: 20rpx 0;
          
          &:not(:last-child) {
            border-bottom: 1rpx solid rgba(255, 255, 255, 0.08);
          }
          
          .visitor-avatar {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            border: 2rpx solid rgba(255, 255, 255, 0.1);
          }
          
          .visitor-info {
            flex: 1;
            margin-left: 20rpx;
            max-width: calc(100% - 240rpx); // 添加最大宽度，减去头像和关注按钮宽度
            
            .visitor-name {
              font-size: 28rpx;
              font-weight: 600;
              color: #e0e0e0;
              max-width: 220rpx; // 从250rpx改为220rpx
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              
              &.username-vip {
                background: linear-gradient(45deg, #8eac21, #B3F73C);
                background-size: 200% 200%;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                text-shadow: 0 0 5px rgba(179, 247, 60, 0.3);
                animation: gradient-animation 3s ease infinite;
              }
            }
            
            .visitor-time {
              font-size: 22rpx;
              color: #999;
              margin-top: 6rpx;
            }
          }
          
          .visitor-action {
            .follow-btn {
              padding: 10rpx 24rpx;
              background: linear-gradient(135deg, #8eac21, #B3F73C);
              color: #020303;
              border-radius: 30rpx;
              font-size: 24rpx;
              box-shadow: 0 4rpx 10rpx rgba(179, 247, 60, 0.3);
              transition: all 0.3s;
              
              &:active {
                transform: scale(0.95);
                background: linear-gradient(135deg, #8eac21, #8eac21);
              }
              
              &.following {
                background: rgba(255, 255, 255, 0.1);
                color: #e0e0e0;
                box-shadow: none;
              }
            }
          }
        }
      }
    }
  }
  
  .posts-modal {
    width: 600rpx;
    background: linear-gradient(145deg, #050505, #0a0a0a);
    border-radius: 20rpx;
    overflow: hidden;
    max-height: 800rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.5);
    position: relative;
    
    // 添加边框样式，确保圆角边缘没有白边
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 20rpx;
      border: 1rpx solid rgba(179, 247, 60, 0.2); 
      pointer-events: none;
      z-index: 1;
    }
    
    .posts-header {
      padding: 30rpx;
      position: relative;
      background: linear-gradient(135deg, #8eac21, #B3F73C);
      
      .posts-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #020303;
      }
      
      .posts-close {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        width: 50rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.8);
        
        .tn-icon-close {
          font-size: 30rpx;
        }
      }
    }
    
    .posts-content {
      .posts-list {
        max-height: 600rpx;
        
        .empty-posts {
          padding: 60rpx 30rpx;
          text-align: center;
          color: #999;
            font-size: 28rpx;
          
          .tn-icon-info {
            font-size: 60rpx;
            margin-bottom: 20rpx;
            display: block;
          }
          
          .create-post-btn {
            margin-top: 30rpx;
            height: 70rpx;
            line-height: 70rpx;
            background-color: #B3F73C;
            color: #020303;
            border-radius: 35rpx;
            font-size: 26rpx;
            font-weight: 600;
            display: inline-block;
            padding: 0 40rpx;
          }
        }
        
        .post-item {
          display: flex;
          align-items: center;
          padding: 30rpx;
          
          &:not(:last-child) {
            border-bottom: 1rpx solid rgba(255, 255, 255, 0.05);
          }
          
          .post-content {
            flex: 1;
            margin-right: 20rpx;
            
            .post-text {
          font-size: 28rpx;
              color: #e0e0e0;
              line-height: 1.5;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            
            .post-info {
              display: flex;
              justify-content: space-between;
              margin-top: 10rpx;
              font-size: 22rpx;
              color: #999;
              
              .post-stats {
                text {
                  margin-right: 4rpx;
                }
              }
            }
          }
          
          .post-image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 10rpx;
            object-fit: cover;
          }
        }
      }
    }
  }
}

.custom-nav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  transition: all 0.3s ease;
  padding-top: var(--status-bar-height);
  
  &.nav-scrolled {
    background-color: rgba(2, 3, 3, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(179, 247, 60, 0.1);
  }
  
  .nav-content {
    width: 100%;
    padding: 0 30rpx;
    height: 90rpx;
    display: flex;
    align-items: center;
  }
  
  .nav-left, .nav-right {
    z-index: 100;
    
    .icon-btn {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      background: linear-gradient(145deg, rgba(0, 0, 0, 0.3), rgba(30, 30, 30, 0.2));
      border-radius: 50%;
      position: relative;
      transition: all 0.3s;
      border: 1px solid rgba(179, 247, 60, 0.05);
      
      &:active {
        transform: scale(0.95);
        background: linear-gradient(145deg, rgba(30, 30, 30, 0.3), rgba(0, 0, 0, 0.3));
        border-color: rgba(179, 247, 60, 0.2);
      }
      
      .tn-icon-set, .tn-icon-message {
        font-size: 40rpx;
      }
      
      .badge-dot {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        width: 16rpx;
        height: 16rpx;
        background-color: #e74c3c;
        border-radius: 50%;
        box-shadow: 0 0 8rpx rgba(231, 76, 60, 0.6);
        animation: pulse-badge 1.5s infinite;
      }
    }
  }
  
  .nav-user-info {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    
    .nav-avatar {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin-right: 16rpx;
      border: 2rpx solid #B3F73C;
      box-shadow: 0 0 10rpx rgba(179, 247, 60, 0.3);
    }
    
    .nav-username {
      font-size: 28rpx;
      font-weight: 600;
      color: #ffffff;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
      max-width: 300rpx;
      display: flex;
      align-items: center;
      
      .username-text {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        max-width: 155rpx;
      }
      
      .badges-container {
        display: flex;
        align-items: center;
        margin-left: 8rpx;
      }
      
      .nav-verified {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #B3F73C, #8eac21);
        color: #020303;
        border-radius: 50%;
        width: 28rpx;
        height: 28rpx;
        font-size: 16rpx;
      }
      
      .nav-vip-badge {
        margin-left: 8rpx;
        background: linear-gradient(135deg, #8eac21, #B3F73C);
        color: #020303;
        padding: 2rpx 8rpx;
        border-radius: 10rpx;
        font-size: 16rpx;
        font-weight: bold;
        border: 1rpx solid #020303;
        height: 24rpx;
        line-height: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      &.username-vip {
        background: linear-gradient(45deg, #8eac21, #B3F73C);
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 5px rgba(179, 247, 60, 0.3);
        animation: gradient-animation 3s ease infinite;
        
        .badges-container,
        .nav-verified,
        .nav-vip-badge {
          -webkit-text-fill-color: initial;
          text-shadow: none;
        }
      }
    }
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(179, 247, 60, 0.6);
  }
  70% {
    box-shadow: 0 0 0 10rpx rgba(179, 247, 60, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(179, 247, 60, 0);
  }
}

@keyframes pulse-badge {
  0% {
    box-shadow: 0 0 0 0 rgba(179, 247, 60, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6rpx rgba(179, 247, 60, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(179, 247, 60, 0);
  }
}

@keyframes neon-glow {
  0%, 100% {
    box-shadow: 0 0 10rpx rgba(179, 247, 60, 0.6);
  }
  50% {
    box-shadow: 0 0 20rpx rgba(179, 247, 60, 0.8), 0 0 30rpx rgba(179, 247, 60, 0.4);
  }
}

@keyframes vip-shine {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes border-pulse {
  0% {
    border-color: rgba(179, 247, 60, 0.3);
  }
  50% {
    border-color: rgba(179, 247, 60, 0.7);
  }
  100% {
    border-color: rgba(179, 247, 60, 0.3);
  }
}

@keyframes pulse-icon {
  0% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1.1);
  }
}

@keyframes hot-dot-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.vip-highlight {
  background: linear-gradient(145deg, rgba(2, 3, 3, 0.9), rgba(10, 10, 10, 0.9));
  position: relative;
  transform: scale(1.02);
  box-shadow: 0 4rpx 15rpx rgba(179, 247, 60, 0.15);
  border-radius: 12rpx;
  margin: 10rpx 0;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1rpx solid rgba(179, 247, 60, 0.3);
    border-radius: 12rpx;
    pointer-events: none;
    z-index: 1;
    animation: border-pulse 2s infinite;
  }
}

.vip-icon-highlight {
  background: linear-gradient(135deg, rgba(179, 247, 60, 0.6), rgba(142, 172, 33, 0.6)) !important;
  box-shadow: 0 0 15rpx rgba(179, 247, 60, 0.4) !important;
  transform: scale(1.1);
  animation: pulse-icon 2s infinite;
}

.vip-text-highlight {
  font-weight: bold !important;
  font-size: 30rpx !important;
  color: #B3F73C !important;
  text-shadow: 0 0 6rpx rgba(179, 247, 60, 0.2);
}

.hot-tag {
  padding: 4rpx 12rpx;
  background: linear-gradient(90deg, #ff6b6b, #ff9f43);
  border-radius: 20rpx;
  font-size: 20rpx;
  color: white;
  margin-right: 20rpx;
  position: relative;
  box-shadow: 0 2rpx 6rpx rgba(255, 107, 107, 0.3);
  
  &::after {
    content: '';
    position: absolute;
    top: -6rpx;
    right: -6rpx;
    width: 12rpx;
    height: 12rpx;
    background-color: #ff6b6b;
    border-radius: 50%;
    box-shadow: 0 0 4rpx rgba(255, 107, 107, 0.5);
    animation: hot-dot-pulse 1s infinite;
  }
}

// 添加新的动画效果
@keyframes modal-enter {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes neon-border {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 会员卡片样式 - 新增 */
.vip-card {
  position: relative;
  margin: 20rpx 0 30rpx;
  border-radius: 24rpx;
  overflow: hidden;
  height: 150rpx; /* 高度从200rpx减小到150rpx */
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
  transition: all 0.3s;
  transform: translateZ(0);
  
  // 添加未开通状态下的闪光边框效果
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24rpx;
    padding: 1rpx;
    background: linear-gradient(90deg, rgba(179, 247, 60, 0.2), rgba(179, 247, 60, 0.4), rgba(179, 247, 60, 0.2));
    background-size: 200% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: neon-border 4s infinite linear;
    z-index: 3;
  }
  
  // 添加未开通状态下的"推荐"角标
  &::after {
    content: '推荐';
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    background: rgba(20, 20, 20, 0.8);
    color: #aaaaaa;
    padding: 2rpx 10rpx;
    border-radius: 10rpx;
    font-size: 16rpx;
    font-weight: bold;
    z-index: 4;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 6rpx 15rpx rgba(0, 0, 0, 0.2);
  }
  
  &.is-vip {
    // 覆盖未开通状态的边框
    &::before {
      background: linear-gradient(90deg, #8eac21, #B3F73C, #8eac21);
      padding: 2rpx;
      animation: neon-border 3s infinite linear;
      box-shadow: 0 0 15rpx rgba(179, 247, 60, 0.4);
    }
    
    // 覆盖未开通状态的角标
    &::after {
      content: 'VIP';
      background: rgba(0, 0, 0, 0.6);
      color: #B3F73C;
      padding: 4rpx 12rpx;
      border-radius: 12rpx;
      font-size: 18rpx;
      border: 1px solid rgba(179, 247, 60, 0.3);
      box-shadow: 0 0 10rpx rgba(179, 247, 60, 0.3);
      animation: pulse 2s infinite;
    }
    
    .vip-card-bg {
      background: linear-gradient(135deg, #151515, #242424);
      border: 1px solid rgba(179, 247, 60, 0.3);
      
      &::before {
        background: url('https://picsum.photos/seed/vipbg/800/400') center/cover no-repeat;
        opacity: 0.15; // 提高不透明度
        filter: none; // 移除灰度滤镜
      }
      
      &::after {
        background: linear-gradient(135deg, rgba(20, 20, 20, 0.7), rgba(40, 40, 40, 0.7));
      }
    }
    
    .vip-card-btn {
      background: linear-gradient(90deg, #8eac21, #B3F73C);
      color: #020303;
      box-shadow: 0 0 15rpx rgba(179, 247, 60, 0.4);
      border: none; // 移除灰色边框
      font-weight: bold;
      
      &::after {
        background: rgba(255, 255, 255, 0.2); // 更亮的闪光效果
        animation: vip-btn-shine 2s infinite; // 加快动画
      }
    }
    
    // 为VIP状态设置特殊样式
    .vip-card-left {
      .vip-card-title {
        color: #B3F73C; // 霓虹绿色
        text-shadow: 0 0 8rpx rgba(179, 247, 60, 0.5); // 增加文字辉光
        
        .tn-icon-vip-diamond {
          color: #B3F73C;
          animation: pulse-icon 2s infinite;
          text-shadow: 0 0 10rpx rgba(179, 247, 60, 0.7);
        }
      }
      
      .vip-card-desc {
        color: rgba(255, 255, 255, 0.9); // 更亮的白色
        text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.5);
      }
      
      .vip-card-tags {
        .vip-tag {
          background-color: rgba(179, 247, 60, 0.15); // 半透明绿色背景
          border: 1px solid rgba(179, 247, 60, 0.4);
          color: #B3F73C;
          text-shadow: 0 0 5rpx rgba(179, 247, 60, 0.5);
          animation: border-pulse 2s infinite;
        }
      }
    }
  }
  
  .vip-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #131313, #252525);
    border: 1px solid rgba(70, 70, 70, 0.3);
    z-index: 1;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('https://picsum.photos/seed/vipbg/800/400') center/cover no-repeat;
      opacity: 0.04;
      z-index: -1;
      filter: grayscale(0.7);
    }
    
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(25, 25, 25, 0.9), rgba(40, 40, 40, 0.9));
      z-index: -1;
    }
  }
  
  .vip-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx; /* 减小内边距 */
    height: 100%;
    box-sizing: border-box;
  }
  
  .vip-card-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    .vip-card-title {
      font-size: 32rpx; /* 减小字体 */
      font-weight: bold;
      color: #aaaaaa;
      margin-bottom: 6rpx; /* 减小间距 */
      display: flex;
      align-items: center;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
      
      .tn-icon-vip-diamond {
        margin-right: 8rpx;
        font-size: 36rpx; /* 减小图标 */
        color: #aaaaaa;
      }
    }
    
    .vip-card-desc {
      font-size: 22rpx; /* 减小字体 */
      color: rgba(170, 170, 170, 0.8);
      margin-bottom: 8rpx; /* 减小间距 */
    }
    
    .vip-card-tags {
      display: flex;
      flex-wrap: nowrap; /* 避免换行 */
      
      .vip-tag {
        padding: 2rpx 10rpx; /* 减小内边距 */
        background-color: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(170, 170, 170, 0.2);
        border-radius: 16rpx;
        font-size: 18rpx; /* 减小字体 */
        color: #aaaaaa;
        margin-right: 8rpx;
      }
    }
  }
  
  .vip-card-right {
    .vip-card-btn {
      padding: 12rpx 30rpx; /* 减小按钮大小 */
      background: linear-gradient(90deg, #2a2a2a, #4a4a4a);
      color: #cccccc;
      border-radius: 30rpx;
      font-size: 24rpx; /* 减小字体 */
      font-weight: 600;
      box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.3);
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(170, 170, 170, 0.2);
      
      &::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: rgba(255, 255, 255, 0.05);
        transform: rotate(45deg);
        animation: vip-btn-shine 4s infinite;
      }
    }
  }
}

/* 会员卡片动画 */
@keyframes shine {
  0% {
    text-shadow: 0 0 5rpx rgba(179, 247, 60, 0.5);
  }
  50% {
    text-shadow: 0 0 15rpx rgba(179, 247, 60, 0.8);
  }
  100% {
    text-shadow: 0 0 5rpx rgba(179, 247, 60, 0.5);
  }
}

@keyframes vip-btn-shine {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

@keyframes pulse-border {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 在样式部分添加导航栏和头部紧凑视图的认证图标样式 */
.nav-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #B3F73C, #8eac21);
  color: #020303;
  border-radius: 50%;
  width: 28rpx;
  height: 28rpx;
  margin-left: 6rpx;
  vertical-align: middle;
  box-shadow: 0 0 4rpx rgba(179, 247, 60, 0.4);
  
  .tn-icon-check {
    font-size: 16rpx;
    transform: scale(1.1);
  }
}

.compact-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #B3F73C, #8eac21);
  color: #020303;
  border-radius: 50%;
  width: 28rpx;
  height: 28rpx;
  margin-left: 6rpx;
  vertical-align: middle;
  box-shadow: 0 0 4rpx rgba(179, 247, 60, 0.4);
  
  .tn-icon-check {
    font-size: 16rpx;
    transform: scale(1.1);
  }
}

// 添加脉冲动画效果
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 5rpx rgba(179, 247, 60, 0.5);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 15rpx rgba(179, 247, 60, 0.8);
    filter: brightness(1.2);
  }
  100% {
    box-shadow: 0 0 5rpx rgba(179, 247, 60, 0.5);
    filter: brightness(1);
  }
}

// 修改头像容器的样式
.profile-avatar-container {
  position: relative;
  z-index: 5;
  margin-right: 10rpx;
  width: 180rpx;
  height: 180rpx;
  
  // 当进度为100%时的特殊样式
  &.profile-completed {
    .profile-completion-ring {
      .completion-fill, .second-half {
        background: linear-gradient(90deg, rgba(179, 247, 60, 0.45), rgba(142, 172, 33, 0.45));
        animation: subtle-pulse 3s infinite;
      }
      
      &::after {
        border: 1rpx solid rgba(179, 247, 60, 0.3);
      }
    }
  }
  
  .profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2rpx solid rgba(30, 30, 30, 0.8);
    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 3;
    display: block;
  }
  
  /* 编辑按钮 - 放在头像正下方 */
  .profile-edit-btn {
    position: absolute;
    bottom: -20rpx;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(2, 3, 3, 0.85);
    border-radius: 30rpx;
    height: 44rpx;
    padding: 0 18rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #B3F73C;
    border: 1rpx solid rgba(179, 247, 60, 0.3);
    z-index: 5;
    transition: all 0.2s;
    white-space: nowrap;
    min-width: 60rpx;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
    
    &:active {
      transform: translateX(-50%) scale(0.95);
      background-color: rgba(179, 247, 60, 0.1);
    }
    
    .tn-icon-edit {
      font-size: 24rpx;
      margin-right: 6rpx;
    }
    
    .edit-text {
      font-size: 24rpx;
      margin-left: 4rpx;
      display: inline-block;
    }
  }
}

// 更微妙的脉冲动画效果
@keyframes subtle-pulse {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.4;
  }
}

/* 添加底部安全区域样式 */
.safe-area-bottom {
  width: 100%;
  height: 120rpx; /* tabbar高度(100rpx) + 额外安全间距(20rpx) */
  background-color: transparent;
  position: relative;
  z-index: 1;
}
</style> 